<!DOCTYPE HTML>
<html>

<head>
	<link rel="bookmark"  type="image/x-icon"  href="/img/logo_miccall.png"/>
	<link rel="shortcut icon" href="/img/logo_miccall.png">
	
			    <title>
    Ame雨
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/amelin-ting/css/mic_main.css" />
    <link rel="stylesheet" href="/amelin-ting/css/dropdownMenu.css" />
    <meta name="keywords" content="Ame雨" />
    
    	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
	 
    <noscript>
        <link rel="stylesheet" href="/amelin-ting/css/noscript.css" />
    </noscript>
    <style type="text/css">
        body:before {
          content: ' ';
          position: fixed;
          top: 0;
          background: url('/amelin-ting/img/bg.jpg') center 0 no-repeat;
          right: 0;
          bottom: 0;
          left: 0;
          background-size: cover; 
        }
    </style>

			    
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


    <script src="/amelin-ting/js/jquery.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrollex.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrolly.min.js"></script>
    <script src="/amelin-ting/js/skel.min.js"></script>
    <script src="/amelin-ting/js/util.js"></script>
    <script src="/amelin-ting/js/main.js"></script>
	
<meta name="generator" content="Hexo 5.4.0"></head>
    
		
<!-- Layouts -->



<!--  代码渲染  -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
    <!-- Wrapper 外包 s-->
    <div id="wrapper" class="fade-in">
        <!-- Intro 头部显示 s -->
        <!-- Intro 头部显示 e -->
        <!-- Header 头部logo start -->
        <header id="header">
    <a href="/amelin-ting/" class="logo">Art Space</a>
</header>
        <!-- Nav 导航条 start -->
        <nav id="nav" class="special" >
            <ul class="menu links" >
			<!-- Homepage  主页  --> 
			<li >
	            <a href="/amelin-ting/" rel="nofollow">主页</a>
	        </li>
			<!-- categories_name  分类   --> 
	        
	        <li class="active">
	            <a href="#s1">分类</a>
	                    <ul class="submenu">
	                        <li>
	                        <a class="category-link" href="/amelin-ting/categories/Go/">Go</a></li><li><a class="category-link" href="/amelin-ting/categories/django/">django</a></li><li><a class="category-link" href="/amelin-ting/categories/drf/">drf</a></li><li><a class="category-link" href="/amelin-ting/categories/gin/">gin</a></li><li><a class="category-link" href="/amelin-ting/categories/go/">go</a></li><li><a class="category-link" href="/amelin-ting/categories/linux/">linux</a></li><li><a class="category-link" href="/amelin-ting/categories/mysql/">mysql</a></li><li><a class="category-link" href="/amelin-ting/categories/python/">python</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F/">内网穿透</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%89%8D%E7%AB%AF/">前端</a>
	                    </ul>
	        </li>
	        
	        <!-- archives  归档   --> 
	        
	        
		        <!-- Pages 自定义   -->
		        
		        <li>
		            <a href="/about/" title="简历">
		                简历
		            </a>
		        </li>
		        
		        <li>
		            <a href="/group/" title="团队">
		                团队
		            </a>
		        </li>
		        
		        <li>
		            <a href="/gallery/" title="图库">
		                图库
		            </a>
		        </li>
		        
		        <li>
		            <a href="/tag/" title="标签">
		                标签
		            </a>
		        </li>
		        


            </ul>
            <!-- icons 图标   -->
			<ul class="icons">
                    
                    <li>
                        <a title="github" href="https://github.com/miccall" target="_blank" rel="noopener">
                            <i class="icon fa fa-github"></i>
                        </a>
                    </li>
                    
                    <li>
                        <a title="500px" href="http://500px.com" target="_blank" rel="noopener">
                            <i class="icon fa fa-500px"></i>
                        </a>
                    </li>
                    
			</ul>
</nav>

        <div id="main" >
            <div class ="post_page_title_img" style="height: 25rem;background-image: url(https://img1.baidu.com/it/u=2803186837,1090665115&amp;fm=26&amp;fmt=auto);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
                <a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >前端CSS</h2></a>
            </div>
            <!-- Post -->
            <div class="typo" style="padding: 3rem;">
                <h2 id="一、CSS简介"><a href="#一、CSS简介" class="headerlink" title="一、CSS简介"></a>一、CSS简介</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看</span><br><span class="line"></span><br><span class="line"><span class="number">1</span>.注释</span><br><span class="line">    /*单行注释*/</span><br><span class="line">    /*</span><br><span class="line">    多行注释<span class="number">1</span></span><br><span class="line">    多行注释<span class="number">2</span></span><br><span class="line">    多行注释<span class="number">3</span></span><br><span class="line">    */</span><br><span class="line"></span><br><span class="line">	ps:通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)</span><br><span class="line">            /*这是博客园首页的css样式文件*/</span><br><span class="line">            /*顶部导航条样式*/</span><br><span class="line">            ...</span><br><span class="line">            /*左侧菜单栏样式*/</span><br><span class="line">            ...</span><br><span class="line">            /*右侧菜单栏样式*/</span><br><span class="line">            ...</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="number">2</span>.css的语法结构</span><br><span class="line">    选择器 &#123;</span><br><span class="line">      属性<span class="number">1</span>:值<span class="number">1</span>;</span><br><span class="line">      属性<span class="number">2</span>:值<span class="number">2</span>;</span><br><span class="line">      属性<span class="number">3</span>:值<span class="number">3</span>;</span><br><span class="line">      属性<span class="number">4</span>:值<span class="number">4</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="number">3</span><span class="selector-class">.css</span>的三种引入方式</span><br><span class="line">	<span class="number">3.1</span> style标签内部直接书写(为了教学演示方便我们用第一种)</span><br><span class="line">        &lt;style&gt;</span><br><span class="line">            <span class="selector-tag">h1</span>  &#123;</span><br><span class="line">                <span class="attribute">color</span>: burlywood;</span><br><span class="line">            &#125;</span><br><span class="line">        &lt;/style&gt;</span><br><span class="line"> 	<span class="number">3.2</span> link标签引入外部css文件(最正规的方式 解耦合)</span><br><span class="line">      	&lt;link rel=&quot;stylesheet&quot; href=&quot;mycss<span class="selector-class">.css</span>&quot;&gt;</span><br><span class="line">	<span class="number">3.3</span>行内式(一般不用)</span><br><span class="line">  		&lt;<span class="selector-tag">h1</span> style=&quot;<span class="attribute">color</span>: green<span class="string">&quot;&gt;老板好 要上课吗?&lt;/h1&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">4. css的学习流程</span></span><br><span class="line"><span class="string">        1.先学如何查找标签</span></span><br><span class="line"><span class="string">            css查找标签的方式你一定要学会</span></span><br><span class="line"><span class="string">            因为后面所有的框架封装的查找语句都是基于css来的</span></span><br><span class="line"><span class="string">            css选择器很简单很好学不要有压力!!!</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">        2.之后再学如何添加样式</span></span><br></pre></td></tr></table></figure>

<h2 id="二、css选择器"><a href="#二、css选择器" class="headerlink" title="二、css选择器"></a>二、css选择器</h2><h3 id="2-1-基本选择器"><a href="#2-1-基本选择器" class="headerlink" title="2.1 基本选择器"></a>2.1 基本选择器</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>. id选择器</span><br><span class="line">	<span class="selector-id">#d1</span>&#123;</span><br><span class="line">            <span class="attribute">color</span>: red;</span><br><span class="line">        &#125;     </span><br><span class="line"><span class="comment">/*找到id 是 d1标签*/</span>  </span><br><span class="line"></span><br><span class="line"><span class="number">2</span>. 类选择器</span><br><span class="line">	<span class="selector-class">.c1</span>&#123;</span><br><span class="line">            <span class="attribute">color</span>: magenta;</span><br><span class="line">        &#125;</span><br><span class="line">    <span class="selector-class">.c2</span>&#123;</span><br><span class="line">            <span class="attribute">color</span>: coral;</span><br><span class="line">        &#125;</span><br><span class="line"><span class="comment">/*找到class值里面包含c1 c2的标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="number">3</span>. 元素/标签选择器</span><br><span class="line">	<span class="selector-tag">span</span> &#123;  </span><br><span class="line">            <span class="attribute">color</span>: red;</span><br><span class="line">           &#125;</span><br><span class="line"><span class="comment">/*找到所有的span标签*/</span></span><br><span class="line"></span><br><span class="line"><span class="number">4</span>. 通用选择器</span><br><span class="line">	* &#123;  </span><br><span class="line">            <span class="attribute">color</span>: green;</span><br><span class="line">        &#125;</span><br><span class="line"><span class="comment">/*将html页面上所有的标签全部找到*/</span></span><br></pre></td></tr></table></figure>

<h3 id="2-2-组合选择器"><a href="#2-2-组合选择器" class="headerlink" title="2.2 组合选择器"></a>2.2 组合选择器</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&quot;&quot;&quot;</span><br><span class="line">在前端 我们将标签的嵌套用亲戚关系来表述层级</span><br><span class="line">	&lt;<span class="selector-tag">div</span>&gt;<span class="selector-tag">div</span></span><br><span class="line">        &lt;<span class="selector-tag">p</span>&gt;<span class="selector-tag">div</span> <span class="selector-tag">p</span>&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">        &lt;<span class="selector-tag">p</span>&gt;<span class="selector-tag">div</span> <span class="selector-tag">p</span></span><br><span class="line">            &lt;<span class="selector-tag">span</span>&gt;<span class="selector-tag">div</span> <span class="selector-tag">p</span> <span class="selector-tag">span</span>&lt;/<span class="selector-tag">span</span>&gt;</span><br><span class="line">        &lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">        &lt;<span class="selector-tag">span</span>&gt;<span class="selector-tag">span</span>&lt;/<span class="selector-tag">span</span>&gt;</span><br><span class="line">        &lt;<span class="selector-tag">span</span>&gt;<span class="selector-tag">span</span>&lt;/<span class="selector-tag">span</span>&gt;</span><br><span class="line"> 	&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line"> <span class="selector-tag">div</span>里面的<span class="selector-tag">p</span> <span class="selector-tag">span</span>都是<span class="selector-tag">div</span>的后代</span><br><span class="line"> <span class="selector-tag">p</span>是<span class="selector-tag">div</span>的儿子</span><br><span class="line"> <span class="selector-tag">p</span>里面的<span class="selector-tag">span</span>是<span class="selector-tag">p</span>的儿子 是<span class="selector-tag">div</span>的孙子</span><br><span class="line"> <span class="selector-tag">div</span>是<span class="selector-tag">p</span>的父亲</span><br><span class="line"> ...</span><br><span class="line">&quot;&quot;&quot;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*后代选择器*/</span></span><br><span class="line">        <span class="selector-tag">div</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">            <span class="attribute">color</span>: red;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*儿子选择器*/</span></span><br><span class="line">        <span class="selector-tag">div</span>&gt;<span class="selector-tag">span</span> &#123;</span><br><span class="line">            <span class="attribute">color</span>: red;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*毗邻选择器*/</span></span><br><span class="line">        <span class="selector-tag">div</span>+<span class="selector-tag">span</span> &#123;  <span class="comment">/*同级别紧挨着的下面的第一个*/</span></span><br><span class="line">            <span class="attribute">color</span>: aqua;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*弟弟选择器*/</span></span><br><span class="line">        <span class="selector-tag">div</span>~<span class="selector-tag">span</span> &#123;  <span class="comment">/*同级别下面所有的span*/</span></span><br><span class="line">            <span class="attribute">color</span>: red;</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-3-属性选择器"><a href="#2-3-属性选择器" class="headerlink" title="2.3 属性选择器"></a>2.3 属性选择器</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&quot;&quot;&quot;</span><br><span class="line"><span class="number">1</span> 含有某个属性</span><br><span class="line"><span class="number">2</span> 含有某个属性并且有某个值</span><br><span class="line"><span class="number">3</span> 含有某个属性并且有某个值的某个标签</span><br><span class="line">&quot;&quot;&quot;</span><br><span class="line"># 属性选择器是以<span class="selector-attr">[]</span>作为标志的</span><br><span class="line"></span><br><span class="line">		<span class="selector-attr">[username]</span> &#123;  <span class="comment">/*将所有含有属性名是username的标签背景色改为红色*/</span></span><br><span class="line">            <span class="attribute">background-color</span>: red;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="selector-attr">[username=<span class="string">&#x27;jason&#x27;</span>]</span> &#123;  <span class="comment">/*找到所有属性名是username并且属性值是jason的标签*/</span></span><br><span class="line">           <span class="attribute">background-color</span>: orange;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="selector-tag">input</span><span class="selector-attr">[username=<span class="string">&#x27;jason&#x27;</span>]</span> &#123;  <span class="comment">/*找到所有属性名是username并且属性值是jason的input标签*/</span></span><br><span class="line">            <span class="attribute">background-color</span>: wheat;</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-4-分组与嵌套"><a href="#2-4-分组与嵌套" class="headerlink" title="2.4 分组与嵌套"></a>2.4 分组与嵌套</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>,<span class="selector-tag">p</span>,<span class="selector-tag">span</span> &#123;  <span class="comment">/*逗号表示并列关系*/</span></span><br><span class="line">            <span class="attribute">color</span>: yellow;</span><br><span class="line">        &#125;</span><br><span class="line">d1,<span class="selector-class">.c1</span>,<span class="selector-tag">span</span>  &#123;</span><br><span class="line">            <span class="attribute">color</span>: orange;</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>

<h3 id="2-5-伪类选择器"><a href="#2-5-伪类选择器" class="headerlink" title="2.5 伪类选择器"></a>2.5 伪类选择器</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">       <span class="selector-tag">body</span> &#123;</span><br><span class="line">           <span class="attribute">background-color</span>: black;</span><br><span class="line">       &#125;</span><br><span class="line">       <span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;  <span class="comment">/*访问之前的状态*/</span></span><br><span class="line">           <span class="attribute">color</span>: red;</span><br><span class="line">       &#125;</span><br><span class="line">       <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;  <span class="comment">/*需要记住*/</span></span><br><span class="line">           <span class="attribute">color</span>: aqua;  <span class="comment">/*鼠标悬浮态*/</span></span><br><span class="line">       &#125;</span><br><span class="line">       <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">           <span class="attribute">color</span>: black;  <span class="comment">/*鼠标点击不松开的状态  激活态*/</span></span><br><span class="line">       &#125;</span><br><span class="line">       <span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;</span><br><span class="line">           <span class="attribute">color</span>: darkgray;  <span class="comment">/*访问之后的状态*/</span></span><br><span class="line">       &#125;</span><br><span class="line">       <span class="selector-tag">p</span> &#123;</span><br><span class="line">           <span class="attribute">color</span>: darkgray;</span><br><span class="line">           <span class="attribute">font-size</span>: <span class="number">48px</span>;</span><br><span class="line">       &#125;</span><br><span class="line">       <span class="selector-tag">p</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">           <span class="attribute">color</span>: white;</span><br><span class="line">       &#125;</span><br><span class="line">       </span><br><span class="line">       <span class="selector-tag">input</span><span class="selector-pseudo">:focus</span> &#123;  <span class="comment">/*input框获取焦点(鼠标点了input框)*/</span></span><br><span class="line">           <span class="attribute">background-color</span>: red;</span><br><span class="line">       &#125;</span><br><span class="line">   &lt;/style&gt;</span><br></pre></td></tr></table></figure>

<h3 id="2-6-伪元素选择器"><a href="#2-6-伪元素选择器" class="headerlink" title="2.6 伪元素选择器"></a>2.6 伪元素选择器</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">:first</span>-letter &#123;</span><br><span class="line">            <span class="attribute">font-size</span>: <span class="number">48px</span>;</span><br><span class="line">            <span class="attribute">color</span>: orange;</span><br><span class="line">        &#125;</span><br><span class="line"><span class="selector-tag">p</span>:before &#123;  /*在文本开头 同css添加内容*/</span><br><span class="line">            content: <span class="string">&#x27;你说的对&#x27;</span>;</span><br><span class="line">            <span class="attribute">color</span>: blue;</span><br><span class="line">        &#125;</span><br><span class="line"><span class="selector-tag">p</span>:after &#123;</span><br><span class="line">            content: <span class="string">&#x27;雨露均沾&#x27;</span>;</span><br><span class="line">            <span class="attribute">color</span>: orange;</span><br><span class="line">        &#125;</span><br><span class="line">ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)</span><br></pre></td></tr></table></figure>

<h3 id="2-7-选择器优先级顺序"><a href="#2-7-选择器优先级顺序" class="headerlink" title="2.7 选择器优先级顺序"></a>2.7 选择器优先级顺序</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">&quot;&quot;&quot;</span><br><span class="line">id选择器</span><br><span class="line">类选择器</span><br><span class="line">标签选择器</span><br><span class="line">行内式</span><br><span class="line">	</span><br><span class="line">&quot;&quot;&quot;</span><br><span class="line">&lt;!DOCTYPE <span class="selector-tag">html</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">html</span> lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-<span class="number">8</span>&quot;&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; <span class="attribute">content</span>=&quot;<span class="attribute">width</span>=device-<span class="attribute">width</span>, <span class="attribute">initial</span>-scale=<span class="number">1</span>&quot;&gt;</span><br><span class="line"></span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        <span class="comment">/*</span></span><br><span class="line"><span class="comment">            1.选择器相同 书写顺序不同</span></span><br><span class="line"><span class="comment">                就近原则:谁离标签更近就听谁的</span></span><br><span class="line"><span class="comment">            2.选择器不同 ...</span></span><br><span class="line"><span class="comment">                行内 &gt; id选择器  &gt; 类选择器 &gt; 标签选择器</span></span><br><span class="line"><span class="comment">                精确度越高越有效</span></span><br><span class="line"><span class="comment">        */</span></span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            <span class="attribute">color</span>: aqua;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">/*.c1 &#123;*/</span></span><br><span class="line">        <span class="comment">/*    color: orange;*/</span></span><br><span class="line">        <span class="comment">/*&#125;*/</span></span><br><span class="line">        <span class="comment">/*p &#123;*/</span></span><br><span class="line">        <span class="comment">/*    color: red;*/</span></span><br><span class="line">        <span class="comment">/*&#125;*/</span></span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;!--    &lt;link rel=&quot;stylesheet&quot; href=&quot;mycss1<span class="selector-class">.css</span>&quot;&gt;--&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">p</span> id=&quot;d1&quot; class=&quot;c1&quot; style=&quot;<span class="attribute">color</span>: blue<span class="string">&quot;&gt;贤妻果然很识趣，有前途~&lt;/p&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="三、css属性相关"><a href="#三、css属性相关" class="headerlink" title="三、css属性相关"></a>三、css属性相关</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">        <span class="selector-tag">p</span> &#123;</span><br><span class="line">            <span class="attribute">background-color</span>: red;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-tag">span</span> &#123;</span><br><span class="line">            <span class="attribute">background-color</span>: green;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">            <span class="comment">/*行内标签无法设置长宽 就算你写了 也不会生效*/</span></span><br><span class="line">        &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<h3 id="3-1-字体属性"><a href="#3-1-字体属性" class="headerlink" title="3.1 字体属性"></a>3.1 字体属性</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">            <span class="attribute">font-family</span>: <span class="string">&quot;Arial Black&quot;</span>,<span class="string">&quot;微软雅黑&quot;</span>,<span class="string">&quot;...&quot;</span>;  !*第一个不生效就用后面的 写多个备用*!</span><br><span class="line"></span><br><span class="line">            <span class="attribute">font-size</span>: <span class="number">24px</span>;  !*字体大小*!</span><br><span class="line"></span><br><span class="line">            <span class="attribute">font-weight</span>: inherit;  !*bolder lighter <span class="number">100</span>~<span class="number">900</span> <span class="attribute">inherit</span>继承父元素的粗细值*!</span><br><span class="line"></span><br><span class="line">            <span class="attribute">color</span>: red;  !*直接写颜色英文*!</span><br><span class="line">            <span class="attribute">color</span>: <span class="number">#ee762e</span>;  !*颜色编号*!</span><br><span class="line">            <span class="attribute">color</span>: <span class="built_in">rgb</span>(<span class="number">128</span>,<span class="number">23</span>,<span class="number">45</span>);  !*三基色 数字  范围<span class="number">0</span>-<span class="number">255</span>*!</span><br><span class="line">            <span class="attribute">color</span>: <span class="built_in">rgba</span>(<span class="number">23</span>, <span class="number">128</span>, <span class="number">91</span>, <span class="number">0.9</span>);  !*第四个参数是颜色的透明度 范围是<span class="number">0</span>-<span class="number">1</span>*!</span><br><span class="line"></span><br><span class="line">            当你想要一些颜色的时候 可以利用现成的工具</span><br><span class="line">                <span class="number">1</span> pycharm提供的取色器</span><br><span class="line">                <span class="number">2</span> qq或者微信截图功能</span><br><span class="line">  							也可以多软件结合使用 </span><br><span class="line">            </span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-2-文字属性"><a href="#3-2-文字属性" class="headerlink" title="3.2 文字属性"></a>3.2 文字属性</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">            <span class="attribute">text-align</span>: center;  !*居中*!</span><br><span class="line">            <span class="attribute">text-align</span>: right;</span><br><span class="line">            <span class="attribute">text-align</span>: left;</span><br><span class="line">            <span class="attribute">text-align</span>: justify;  !*两端对齐*!</span><br><span class="line"></span><br><span class="line">            <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">            <span class="attribute">text-decoration</span>: overline;</span><br><span class="line">            <span class="attribute">text-decoration</span>: line-through;</span><br><span class="line">            <span class="attribute">text-decoration</span>: none;</span><br><span class="line">            在<span class="selector-tag">html</span>中 有很多标签渲染出来的样式效果是一样的*/</span><br><span class="line">            <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">            <span class="attribute">text-indent</span>: <span class="number">32px</span>;   <span class="comment">/*缩进32px*/</span></span><br><span class="line">        &#125;</span><br><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line">            <span class="attribute">text-decoration</span>: none;  <span class="comment">/*主要用于给a标签去掉自带的下划线  需要掌握*/</span></span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-3-背景图片"><a href="#3-3-背景图片" class="headerlink" title="3.3  背景图片"></a>3.3  背景图片</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE <span class="selector-tag">html</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">html</span> lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-<span class="number">8</span>&quot;&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; <span class="attribute">content</span>=&quot;<span class="attribute">width</span>=device-<span class="attribute">width</span>, <span class="attribute">initial</span>-scale=<span class="number">1</span>&quot;&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: red;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d2</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: green;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d3</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">            <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">&quot;222.png&quot;</span>);</span><br><span class="line">            <span class="attribute">background-attachment</span>: fixed;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d4</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: aqua;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> id=&quot;d1&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> id=&quot;d2&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> id=&quot;d3&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> id=&quot;d4&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">body</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">html</span>&gt;</span><br></pre></td></tr></table></figure>

<h3 id="3-4-边框"><a href="#3-4-边框" class="headerlink" title="3.4  边框"></a>3.4  边框</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE <span class="selector-tag">html</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">html</span> lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-<span class="number">8</span>&quot;&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; <span class="attribute">content</span>=&quot;<span class="attribute">width</span>=device-<span class="attribute">width</span>, <span class="attribute">initial</span>-scale=<span class="number">1</span>&quot;&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line"></span><br><span class="line">        <span class="selector-tag">p</span> &#123;</span><br><span class="line">            <span class="attribute">background-color</span>: red;</span><br><span class="line"></span><br><span class="line">            <span class="attribute">border-width</span>: <span class="number">5px</span>;</span><br><span class="line">            <span class="attribute">border-style</span>: solid;</span><br><span class="line">            <span class="attribute">border-color</span>: green;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-tag">div</span> &#123;</span><br><span class="line">            <span class="attribute">border-left-width</span>: <span class="number">5px</span>;</span><br><span class="line">            <span class="attribute">border-left-color</span>: red;</span><br><span class="line">            <span class="attribute">border-left-style</span>: dotted;</span><br><span class="line">            </span><br><span class="line">            <span class="attribute">border-right-width</span>: <span class="number">10px</span>;</span><br><span class="line">            <span class="attribute">border-right-color</span>: greenyellow;</span><br><span class="line">            <span class="attribute">border-right-style</span>: solid;</span><br><span class="line"></span><br><span class="line">            <span class="attribute">border-top-width</span>: <span class="number">15px</span>;</span><br><span class="line">            <span class="attribute">border-top-color</span>: deeppink;</span><br><span class="line">            <span class="attribute">border-top-style</span>: dashed;</span><br><span class="line"></span><br><span class="line">            <span class="attribute">border-bottom-width</span>: <span class="number">10px</span>;</span><br><span class="line">            <span class="attribute">border-bottom-color</span>: tomato;</span><br><span class="line">            <span class="attribute">border-bottom-style</span>: solid;</span><br><span class="line">            </span><br><span class="line">            <span class="attribute">border</span>: <span class="number">3px</span> solid red;  三者位置可以随意写</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            <span class="attribute">background-color</span>: greenyellow;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">            <span class="attribute">border-radius</span>: <span class="number">50%</span>;  <span class="comment">/*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/</span></span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">p</span>&gt;穷人  被diss到了  哭泣<span class="selector-class">.png</span>&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span>&gt;妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> id=&quot;d1&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">body</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">html</span>&gt;</span><br></pre></td></tr></table></figure>

<h3 id="3-5-display属性"><a href="#3-5-display属性" class="headerlink" title="3.5 display属性"></a>3.5 display属性</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE <span class="selector-tag">html</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">html</span> lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-<span class="number">8</span>&quot;&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; <span class="attribute">content</span>=&quot;<span class="attribute">width</span>=device-<span class="attribute">width</span>, <span class="attribute">initial</span>-scale=<span class="number">1</span>&quot;&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            !*<span class="attribute">display</span>: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!</span><br><span class="line">            <span class="attribute">display</span>: inline;  !*将标签设置为行内标签的特点*!</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d2</span> &#123;</span><br><span class="line">            <span class="attribute">display</span>: inline;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            <span class="attribute">display</span>: block;  !*将标签设置成块儿级标签的特点*!</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d2</span> &#123;</span><br><span class="line">            <span class="attribute">display</span>: block;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            <span class="attribute">display</span>: inline-block;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d2</span> &#123;</span><br><span class="line">            <span class="attribute">display</span>: inline-block;  !*标签即可以在一行显示又可以设置长宽*!</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> style=&quot;<span class="attribute">display</span>: none<span class="string">&quot;&gt;div1&lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;div&gt;div2&lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;div style=&quot;</span>visibility: hidden<span class="string">&quot;&gt;单纯的隐藏 位置还在&lt;/div&gt;  </span></span><br><span class="line"><span class="string">&lt;div&gt;div4&lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;!--&lt;div id=&quot;</span>d1<span class="string">&quot; style=&quot;</span>height: <span class="number">100px</span>;<span class="attribute">width</span>: <span class="number">100px</span>;<span class="attribute">background-color</span>: red<span class="string">&quot;&gt;01&lt;/div&gt;--&gt;</span></span><br><span class="line"><span class="string">&lt;!--&lt;div id=&quot;</span>d2<span class="string">&quot; style=&quot;</span>height: <span class="number">100px</span>;<span class="attribute">width</span>: <span class="number">100px</span>;<span class="attribute">background-color</span>: greenyellow<span class="string">&quot;&gt;02&lt;/div&gt;--&gt;</span></span><br><span class="line"><span class="string">&lt;!--&lt;span id=&quot;</span>d1<span class="string">&quot; style=&quot;</span>height: <span class="number">100px</span>;<span class="attribute">width</span>: <span class="number">100px</span>;<span class="attribute">background-color</span>: red<span class="string">&quot;&gt;span&lt;/span&gt;--&gt;</span></span><br><span class="line"><span class="string">&lt;!--&lt;span id=&quot;</span>d2<span class="string">&quot; style=&quot;</span>height: <span class="number">100px</span>;<span class="attribute">width</span>: <span class="number">100px</span>;<span class="attribute">background-color</span>: greenyellow<span class="string">&quot;&gt;span&lt;/span&gt;--&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;!--&lt;div id=&quot;</span>d1<span class="string">&quot; style=&quot;</span>height: <span class="number">100px</span>;<span class="attribute">width</span>: <span class="number">100px</span>;<span class="attribute">background-color</span>: red<span class="string">&quot;&gt;01&lt;/div&gt;--&gt;</span></span><br><span class="line"><span class="string">&lt;!--&lt;div id=&quot;</span>d2<span class="string">&quot; style=&quot;</span>height: <span class="number">100px</span>;<span class="attribute">width</span>: <span class="number">100px</span>;<span class="attribute">background-color</span>: greenyellow<span class="string">&quot;&gt;02&lt;/div&gt;--&gt;</span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="3-6-盒子模型"><a href="#3-6-盒子模型" class="headerlink" title="3.6 盒子模型"></a>3.6 盒子模型</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line">&quot;&quot;&quot;</span><br><span class="line">盒子模型</span><br><span class="line">	就以快递盒为例</span><br><span class="line">		快递盒与快递盒之间的距离(标签与标签之间的距离 <span class="attribute">margin</span>外边距)</span><br><span class="line">		盒子的厚度(标签的边框 <span class="attribute">border</span>)</span><br><span class="line">		盒子里面的物体到盒子的距离(内容到边框的距离  <span class="attribute">padding</span>内边距)</span><br><span class="line">		物体的大小(内容 <span class="attribute">content</span>)</span><br><span class="line">	</span><br><span class="line">	</span><br><span class="line">	如果你想要调整标签与标签之间的距离 你就可以调整<span class="attribute">margin</span></span><br><span class="line">	</span><br><span class="line">	浏览器会自带<span class="number">8px</span>的<span class="attribute">margin</span>，一般情况下我们在写页面的时候，上来就会先将<span class="selector-tag">body</span>的<span class="attribute">margin</span>去除</span><br><span class="line">&quot;&quot;&quot;</span><br><span class="line">&lt;!DOCTYPE <span class="selector-tag">html</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">html</span> lang=&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=&quot;UTF-<span class="number">8</span>&quot;&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">    &lt;meta name=&quot;viewport&quot; <span class="attribute">content</span>=&quot;<span class="attribute">width</span>=device-<span class="attribute">width</span>, <span class="attribute">initial</span>-scale=<span class="number">1</span>&quot;&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        <span class="selector-tag">body</span> &#123;</span><br><span class="line">            <span class="attribute">margin</span>: <span class="number">0</span>;  上下左右全是<span class="number">0</span></span><br><span class="line">            <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">20px</span>;  !* 第一个上下 第二个左右*!</span><br><span class="line">            <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">20px</span> <span class="number">30px</span>;  !*第一个上  第二个左右  第三个下*!*/</span><br><span class="line">            <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">20px</span> <span class="number">30px</span> <span class="number">40px</span>;  !*上 右 下 左*!</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-tag">p</span> &#123;</span><br><span class="line">            <span class="attribute">margin-left</span>: <span class="number">0</span>;</span><br><span class="line">            <span class="attribute">margin-top</span>: <span class="number">0</span>;</span><br><span class="line">            <span class="attribute">margin-right</span>: <span class="number">0</span>;</span><br><span class="line">            <span class="attribute">margin-bottom</span>: <span class="number">0</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            <span class="attribute">margin-bottom</span>: <span class="number">50px</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">        <span class="selector-id">#d2</span> &#123;</span><br><span class="line">            <span class="attribute">margin-top</span>: <span class="number">20px</span>;  <span class="comment">/*不叠加 只取大的*/</span></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="selector-id">#dd</span> &#123;</span><br><span class="line">            <span class="attribute">margin</span>: <span class="number">0</span> auto;  <span class="comment">/*只能做到标签的水平居中*/</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-tag">p</span> &#123;</span><br><span class="line">            <span class="attribute">border</span>: <span class="number">3px</span> solid red;</span><br><span class="line">            <span class="attribute">padding-left</span>: <span class="number">10px</span>;</span><br><span class="line">            <span class="attribute">padding-top</span>: <span class="number">20px</span>;</span><br><span class="line">            <span class="attribute">padding-right</span>: <span class="number">20px</span>;</span><br><span class="line">            <span class="attribute">padding-bottom</span>: <span class="number">50px</span>;</span><br><span class="line"></span><br><span class="line">            <span class="attribute">padding</span>: <span class="number">10px</span>;</span><br><span class="line">            <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">20px</span>;</span><br><span class="line">            <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">20px</span> <span class="number">30px</span>;</span><br><span class="line">            <span class="attribute">padding</span>: <span class="number">10px</span> <span class="number">20px</span> <span class="number">30px</span> <span class="number">40px</span>;  <span class="comment">/*规律和margin一模一样*/</span></span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">&lt;!--    &lt;<span class="selector-tag">p</span> style=&quot;<span class="attribute">border</span>: <span class="number">1px</span> solid red;&quot; id=&quot;d1&quot;&gt;ppp&lt;/<span class="selector-tag">p</span>&gt;--&gt;</span><br><span class="line">&lt;!--    &lt;<span class="selector-tag">p</span> style=&quot;<span class="attribute">border</span>: <span class="number">1px</span> solid orange;&quot; id=&quot;d2&quot;&gt;ppp&lt;/<span class="selector-tag">p</span>&gt;--&gt;</span><br><span class="line">&lt;!--&lt;<span class="selector-tag">div</span> style=&quot;<span class="attribute">border</span>: <span class="number">3px</span> solid red;<span class="attribute">height</span>: <span class="number">400px</span>;<span class="attribute">width</span>: <span class="number">400px</span><span class="string">&quot;&gt;--&gt;</span></span><br><span class="line"><span class="string">&lt;!--    &lt;div id=&#x27;dd&#x27; style=&quot;</span>border: <span class="number">1px</span> solid orange;<span class="attribute">height</span>: <span class="number">50px</span>;<span class="attribute">width</span>: <span class="number">50px</span>;<span class="attribute">background-color</span>: blue;&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;--&gt;</span><br><span class="line">&lt;!--&lt;/<span class="selector-tag">div</span>&gt;--&gt;</span><br><span class="line"></span><br><span class="line">&lt;<span class="selector-tag">p</span>&gt;ppp&lt;/<span class="selector-tag">p</span>&gt;</span><br><span class="line"></span><br><span class="line">&lt;/<span class="selector-tag">body</span>&gt;</span><br><span class="line">&lt;/<span class="selector-tag">html</span>&gt;</span><br></pre></td></tr></table></figure>

<h3 id="3-7-浮动"><a href="#3-7-浮动" class="headerlink" title="3.7 浮动"></a>3.7 浮动</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&quot;&quot;&quot;浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大&quot;&quot;&quot;</span><br><span class="line">只要是设计到页面的布局一般都是用浮动来提前规划好</span><br><span class="line">&lt;style&gt;</span><br><span class="line">        <span class="selector-tag">body</span> &#123;</span><br><span class="line">            <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: red;</span><br><span class="line">            <span class="attribute">float</span>: left;  <span class="comment">/*浮动  浮到空中往左飘*/</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d2</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: greenyellow;</span><br><span class="line">            <span class="attribute">float</span>: right;   <span class="comment">/*浮动 浮到空中往右飘*/</span></span><br><span class="line">        &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<h3 id="3-8-浮动带来的问题-amp-解决"><a href="#3-8-浮动带来的问题-amp-解决" class="headerlink" title="3.8 浮动带来的问题&amp;解决"></a>3.8 浮动带来的问题&amp;解决</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"># 浮动带来的影响</span><br><span class="line">会造成父标签塌陷的问题</span><br><span class="line"></span><br><span class="line">&quot;&quot;&quot;</span><br><span class="line">解决浮动带来的影响 推导步骤</span><br><span class="line">	<span class="number">1</span>.自己加一个<span class="selector-tag">div</span>设置高度</span><br><span class="line">	<span class="number">2</span>.利用<span class="attribute">clear</span>属性</span><br><span class="line">		<span class="selector-id">#d4</span> &#123;</span><br><span class="line">            <span class="attribute">clear</span>: left;  <span class="comment">/*该标签的左边(地面和空中)不能有浮动的元素*/</span></span><br><span class="line">        &#125;</span><br><span class="line">  <span class="number">3</span>.通用的解决浮动带来的影响方法</span><br><span class="line">  	在写<span class="selector-tag">html</span>页面之前 先提前写好处理浮动带来的影响的 css代码</span><br><span class="line">  	<span class="selector-class">.clearfix</span>:after &#123;</span><br><span class="line">            content: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">            <span class="attribute">display</span>: block;</span><br><span class="line">            <span class="attribute">clear</span>:both;</span><br><span class="line">        &#125;</span><br><span class="line">    之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可</span><br><span class="line">    上述的解决方式是通用的 到哪都一样 并且名字就叫clearfix</span><br><span class="line">&quot;&quot;&quot;</span><br></pre></td></tr></table></figure>

<h3 id="3-9-溢出属性"><a href="#3-9-溢出属性" class="headerlink" title="3.9 溢出属性"></a>3.9 溢出属性</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">            <span class="attribute">border</span>: <span class="number">3px</span> solid red;</span><br><span class="line">            <span class="attribute">overflow</span>: visible;  !*默认就是可见 溢出还是展示*!</span><br><span class="line">            <span class="attribute">overflow</span>: hidden;  !*溢出部分直接隐藏*!</span><br><span class="line">            <span class="attribute">overflow</span>: scroll;  !*设置成上下滚动条的形式*!</span><br><span class="line">            <span class="attribute">overflow</span>: auto;</span><br><span class="line">        &#125;</span><br></pre></td></tr></table></figure>

<h3 id="3-10-定位"><a href="#3-10-定位" class="headerlink" title="3.10  定位"></a>3.10  定位</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>.静态</span><br><span class="line">	所有的标签默认都是静态的static，无法改变位置</span><br><span class="line"></span><br><span class="line"><span class="number">2</span>.相对定位(了解)</span><br><span class="line">	相对于标签原来的位置做移动relative</span><br><span class="line"></span><br><span class="line"><span class="number">3</span>.绝对定位(常用)</span><br><span class="line">	相对于已经定位过的父标签做移动(如果没有父标签那么就以<span class="selector-tag">body</span>为参照)</span><br><span class="line">		eg:小米网站购物车</span><br><span class="line">	当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位</span><br><span class="line"></span><br><span class="line"><span class="number">4</span>.固定定位(常用)</span><br><span class="line">	相对于浏览器窗口固定在某个位置</span><br><span class="line">		eg:右侧小广告</span><br><span class="line"></span><br><span class="line"><span class="number">5</span>.代码演示</span><br><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">    &lt;meta name=<span class="string">&quot;viewport&quot;</span> content=<span class="string">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        body &#123;</span><br><span class="line">            margin: <span class="number">0</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d1</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: red;</span><br><span class="line">            <span class="attribute">left</span>: <span class="number">50px</span>;  <span class="comment">/*从左往右   如果是负数 方向则相反*/</span></span><br><span class="line">            <span class="attribute">top</span>: <span class="number">50px</span>;  <span class="comment">/*从上往下    如果是负数 方向则相反*/</span></span><br><span class="line">            <span class="comment">/*position: static;  !*默认是static无法修改位置*!*/</span></span><br><span class="line">            <span class="attribute">position</span>: relative;</span><br><span class="line">            <span class="comment">/*相对定位</span></span><br><span class="line"><span class="comment">            标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签</span></span><br><span class="line"><span class="comment">            虽然你哪怕没有动 但是你的性质也已经改变了</span></span><br><span class="line"><span class="comment">            */</span></span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="selector-id">#d2</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: red;</span><br><span class="line">            <span class="attribute">position</span>: relative;  <span class="comment">/*已经定位过了*/</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-id">#d3</span> &#123;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: yellowgreen;</span><br><span class="line">            <span class="attribute">position</span>: absolute;</span><br><span class="line">            <span class="attribute">left</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">top</span>: <span class="number">100px</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="selector-id">#d4</span> &#123;</span><br><span class="line">            <span class="attribute">position</span>: fixed;  <span class="comment">/*写了fixed之后 定位就是依据浏览器窗口*/</span></span><br><span class="line">            <span class="attribute">bottom</span>: <span class="number">10px</span>;</span><br><span class="line">            <span class="attribute">right</span>: <span class="number">20px</span>;</span><br><span class="line"></span><br><span class="line">            <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: white;</span><br><span class="line">            <span class="attribute">border</span>: <span class="number">3px</span> solid black;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">&lt;!--    &lt;<span class="selector-tag">div</span> id=&quot;d1&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;--&gt;</span><br><span class="line"></span><br><span class="line">&lt;!--&lt;<span class="selector-tag">div</span> id=&quot;d2&quot;&gt;--&gt;</span><br><span class="line">&lt;!--    &lt;<span class="selector-tag">div</span> id=&quot;d3&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;--&gt;</span><br><span class="line">&lt;!--&lt;/<span class="selector-tag">div</span>&gt;--&gt;</span><br><span class="line"></span><br><span class="line">&lt;<span class="selector-tag">div</span> style=&quot;<span class="attribute">height</span>: <span class="number">500px</span>;<span class="attribute">background-color</span>: red<span class="string">&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;div style=&quot;</span>height: <span class="number">500px</span>;<span class="attribute">background-color</span>: greenyellow<span class="string">&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;div style=&quot;</span>height: <span class="number">500px</span>;<span class="attribute">background-color</span>: blue<span class="string">&quot;&gt;&lt;/div&gt;</span></span><br><span class="line"><span class="string">&lt;div id=&quot;</span>d4<span class="string">&quot;&gt;回到顶部&lt;/div&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">&lt;/body&gt;</span></span><br><span class="line"><span class="string">&lt;/html&gt;</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">ps 浏览器是优先展示文本内容的</span></span><br></pre></td></tr></table></figure>

<h3 id="3-11-验证浮动和定位是否脱离文档流-原来的位置是否还保留"><a href="#3-11-验证浮动和定位是否脱离文档流-原来的位置是否还保留" class="headerlink" title="3.11 验证浮动和定位是否脱离文档流(原来的位置是否还保留)"></a>3.11 验证浮动和定位是否脱离文档流(原来的位置是否还保留)</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 不脱离文档流</span></span><br><span class="line">	<span class="number">1.</span>相对定位</span><br><span class="line"><span class="comment"># 脱离文档流</span></span><br><span class="line">	<span class="number">1.</span>浮动</span><br><span class="line">  	<span class="number">2.</span>绝对定位</span><br><span class="line">  	<span class="number">3.</span>固定定位</span><br></pre></td></tr></table></figure>

<h3 id="3-12-z-index模态框"><a href="#3-12-z-index模态框" class="headerlink" title="3.12  z-index模态框"></a>3.12  z-index模态框</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><span class="line">eg:百度登陆页面 其实是三层结构</span><br><span class="line">  <span class="number">1</span>.最底部是正常内容(z=<span class="number">0</span>)  最远的</span><br><span class="line">  <span class="number">2</span>.黑色的透明区(z=<span class="number">99</span>)  		中间层</span><br><span class="line">  <span class="number">3</span>.白色的注册区域(z=<span class="number">100</span>)  离用户最近</span><br><span class="line"></span><br><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">    &lt;meta name=<span class="string">&quot;viewport&quot;</span> content=<span class="string">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        body &#123;</span><br><span class="line">            margin: <span class="number">0</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-class">.cover</span> &#123;</span><br><span class="line">            <span class="attribute">position</span>: fixed;</span><br><span class="line">            <span class="attribute">left</span>: <span class="number">0</span>;</span><br><span class="line">            <span class="attribute">top</span>: <span class="number">0</span>;</span><br><span class="line">            <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">            <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">            <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.5</span>);</span><br><span class="line">            <span class="attribute">z-index</span>: <span class="number">99</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-class">.modal</span> &#123;</span><br><span class="line">            <span class="attribute">background-color</span>: white;</span><br><span class="line">            <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">            <span class="attribute">position</span>: fixed;</span><br><span class="line">            <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">            <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">            <span class="attribute">z-index</span>: <span class="number">100</span>;</span><br><span class="line">            <span class="attribute">margin-left</span>: -<span class="number">200px</span>;</span><br><span class="line">            <span class="attribute">margin-top</span>: -<span class="number">100px</span>;</span><br><span class="line"></span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;<span class="selector-tag">body</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span>&gt;这是最底层的页面内容&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> class=&quot;cover&quot;&gt;&lt;/<span class="selector-tag">div</span>&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> class=&quot;modal&quot;&gt;</span><br><span class="line">    &lt;<span class="selector-tag">h1</span>&gt;登陆页面&lt;/<span class="selector-tag">h1</span>&gt;</span><br><span class="line">    &lt;<span class="selector-tag">p</span>&gt;username:&lt;input type=<span class="string">&quot;text&quot;</span>&gt;&lt;/p&gt;</span><br><span class="line">    &lt;p&gt;password:&lt;input type=<span class="string">&quot;text&quot;</span>&gt;&lt;/p&gt;</span><br><span class="line">    &lt;button&gt;点我点我~&lt;/button&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>

<h3 id="3-13-透明度"><a href="#3-13-透明度" class="headerlink" title="3.13 透明度"></a>3.13 透明度</h3><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># 它不单单可以修改颜色的透明度还同时修改字体的透明度</span><br><span class="line">rgba只能影响颜色 </span><br><span class="line">而<span class="attribute">opacity</span>可以修改颜色和字体</span><br><span class="line"></span><br><span class="line"><span class="attribute">opacity</span>: <span class="number">0.5</span>;</span><br></pre></td></tr></table></figure>




            </div>

            <!-- Post Comments -->
            
    <!-- 使用 DISQUS_CLICK -->
<div id="disqus-comment">
    <div id="disqus_thread"></div>

<!-- add animation -->
<style>
	.disqus_click_btn {
            line-height: 30px;
            margin: 0;
            min-width: 50px;
            padding: 0 14px;
            display: inline-block;
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
            font-size: 14px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0;
            overflow: hidden;
            will-change: box-shadow;
            transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
            outline: 0;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
            border: 0;
            background: rgba(158, 158, 158, .2);
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
            color: #fff;
            background-color: #7EC0EE;
            text-shadow: 0
        }
</style>
	
<div class="btn_click_load" id="disqus_bt"> 
    <button class="disqus_click_btn">点击查看评论</button>
</div>

<!--
<script type="text/javascript">
$('.btn_click_load').click(function() {
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'http-miccall-tech'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

    document.getElementById('disqus_bt').style.display = "none";
});
</script>
-->
<script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://gitee.com/AmeX/amelin-ting.git/2017/10/01/%E5%89%8D%E7%AB%AF------CSS/';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'https://gitee.com/AmeX/amelin-ting.git/2017/10/01/%E5%89%8D%E7%AB%AF------CSS/'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
</script>

<script type="text/javascript">
    $('.btn_click_load').click(function() {  //click to load comments
        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document;
            var s = d.createElement('script');
            s.src = '//http-miccall-tech.disqus.com/embed.js';
            s.setAttribute('data-timestamp', + new Date());
            (d.head || d.body).appendChild(s);
        })();
        $('.btn_click_load').css('display','none');
    });
</script>
</div>
<style>
    #disqus-comment{
        background-color: #eee;
        padding: 2pc;
    }
</style>


        </div>
        <!-- Copyright 版权 start -->
                <div id="copyright">
            <ul>
                <li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
                <li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
            </ul>
            
                <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
			
        </div>
    </div>
</body>



 	
</html>
